feat: add integrated web preview panel with element selection #5981
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Implement WebPreviewProvider for managing preview panel - Add element selection overlay with DOM inspection - Extract comprehensive element context (HTML, CSS, position, etc.) - Integrate selected element context with AI chat - Add responsive controls and device simulation - Support multiple device viewports (mobile, tablet, desktop) - Handle cross-origin restrictions gracefully - Add comprehensive tests for WebPreviewProvider - Update documentation with usage guide Closes #5971
dosubot
bot
added
size:XXL
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| } | ||
|
|
||
| export class WebPreviewProvider implements vscode.WebviewViewProvider { | ||
| public static readonly viewId = "roo-code.webPreview" |
Contributor
There was a problem hiding this comment.
The viewId is set to 'roo-code.webPreview' but in package.json (and in registerCommands) the id is 'roo-cline.WebPreviewProvider'. These should be consistent to ensure the webview is correctly registered.
Suggested change
| public static readonly viewId = "roo-code.webPreview" | |
| public static readonly viewId = "roo-cline.WebPreviewProvider" |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
- Validate and sanitize URLs before loading in iframe - Use URL constructor to parse and validate URLs - Only allow HTTP and HTTPS protocols - Use setAttribute instead of direct property assignment - Add proper error handling for invalid URLs This fixes: - Client-side URL redirect vulnerability - DOM text reinterpreted as HTML - Client-side cross-site scripting (XSS)
hannesrudolph
added
the
Issue/PR - Triage
roomote bot
pushed a commit
that referenced
this pull request
Jul 20, 2025
- Changed viewId from "roo-code.webPreview" to "roo-cline.WebPreviewProvider" to match package.json and registerCommands.ts - This fixes the issue identified by ellipsis-dev bot in PR #5981 - Security vulnerabilities were already fixed in the original PR
Collaborator
|
@daniel-lxs I don't think this pr solves the issue . I'm working on this issue myself . Feel free to close it . |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR implements an integrated web preview feature with element selection capabilities for AI context, similar to Windsurf IDE.
Features
Implementation Details
WebPreviewProviderclass to manage the preview panelTesting
Screenshots
The web preview panel includes:
Usage
Closes #5971
Important
Adds integrated web preview panel with element selection and AI context extraction in VSCode, including new commands, tests, and documentation.
WebPreviewProviderclass inWebPreviewProvider.tsfor integrated web preview and element selection.openWebPreviewcommand inregisterCommands.tsto focus on the web preview panel.WebPreviewProvider.spec.tsfor web preview functionality.web-preview.mdfor usage guide and feature details.package.jsonto include new web preview view and command.no-undefforpreview.js.This description was created by
for a9e4f1e. You can customize this summary. It will automatically update as commits are pushed.